<template>
  <div>
    <el-form style="margin: 15px 30px;" :model="formInline" :inline="true" class="demo-form-inline">
      <el-form-item label="机构代码">
        <el-input v-model="formInline.comCode" maxlength="8" placeholder="机构代码"></el-input>
      </el-form-item>
      <el-form-item label="用户工号">
        <el-input v-model="formInline.username" maxlength="10" placeholder="用户工号"></el-input>
      </el-form-item>
      <el-form-item label="归属系统">
        <el-select v-model="formInline.systemCode" placeholder="归属系统">
          <el-option label="user-用户管理系统" value="user"></el-option>
          <el-option label="sales-销售管理系统" value="sales"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 95%;margin: 5px 20px;">
      <el-table-column fixed prop="username" label="用户工号" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名" width="80"></el-table-column>
      <el-table-column prop="sex" label="性别" width="60"></el-table-column>
      <el-table-column prop="comName" label="归属机构" width="180"></el-table-column>
      <el-table-column prop="department" label="所属部门" width="120"></el-table-column>
      <el-table-column prop="culture" label="学历" width="60"></el-table-column>
      <el-table-column prop="phone" label="手机" width="110"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="systemCode" label="来源系统" width="80"></el-table-column>
      <el-table-column fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="handleEditMenu(scope.$index, scope.row)" type="text" size="small">菜单</el-button>
          <el-button @click="handleEditRole(scope.$index, scope.row)" type="text" size="small">角色</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
    style="margin-left:50px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { findUserList } from "@/api/user";

export default {
  computed: {
    ...mapGetters(["name"])
  },
  data() {
    return {
      formInline: {
        username: "",
        comCode: "",
        systemCode: ""
      },
      total: 1,
      pageSize: 10,
      tableData: [],
      currentPage: 1
    };
  },
  created() {
    findUserList().then(res => {
      this.currentPage = res.page;
      this.total = res.count;
      this.tableData = res.data;
    });
  },
  methods: {
    search() {
      findUserList(
        this.formInline.username,
        this.formInline.comCode,
        this.formInline.systemCode,
        this.currentPage,
        this.total
      ).then(res => {
        this.tableData = res.data;
      });
      this.editTitle = false;
    },
    handleClick(row) {
      console.log(row);
    },
    handleEditMenu(index, row) {
      this.$router.push({
        path: "/systemManage/userEditMenu",
        query: { editInfo: row }
      });
      console.log(row);
    },
    handleEditRole(index, row) {
      this.$router.push({
        path: "/systemManage/userEditRole",
        query: { editInfo: row }
      });
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.total = val;
      this.search();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.search();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-pagination {
  width: 410px;
  margin: 13px auto;
}

.table {
  text-align: center;
}
</style>
